<template>
  <div class="c-ph24 c-pt30 c-pb30 c-bg-white">
    <div class="c-flex-row c-justify-sb c-fs24 c-fc-xblack">
      <div class="c-text-ellipsis1 c-flex-grow1 c-w0">
        <span class="c-fw-b">配套课程</span>
        <span class="c-pl20 theme-fc">{{title}}</span>
      </div>
      <div
        class="c-fc-gray"
        v-if="relatedTraining.length > 2"
        @click="showStudyModal = true"
      >查看更多</div>
    </div>
    <template v-for="(item, index) in relatedTraining">
      <div
        class="c-flex-row c-pv20"
        v-if="index < 2"
        :key="index"
        :class="index == relatedTraining.length - 1?'':'c-bd-b1'"
        @click="handleClickRoute(item.mainProdType, item.id)"
      >
        <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br4 c-p">
          <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{prodMapType[item.mainProdType]}}</div>
          <img
            class="c-w100 c-h imgCloseBig c-object-fit-cover c-br4"
            :src="$addXossFilter(item.cover)"
            alt=""
          >
        </div>
        <div class="c-pl20 c-flex-grow1 c-w0 c-flex-column c-justify-sb">
          <p class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</p>
          <div
            class="theme-fc c-lh c-fs24"
            v-if="item.payType == 1 || item.payType == 3"
          >{{item.payType == 1?'免费':'加密'}}</div>
          <div
            class="theme-fc c-lh"
            v-else
            :class="Number(item.price) != 0 ? 'c-fs26':'c-fs24'"
          >
            <span
              class="c-fs18"
              v-if="Number(item.price) != 0"
            >{{'￥' | iosPriceFilter(item.optimal)}}</span>{{item.payType | priceValueFilter(item.price, 78, item.optimal)}}
          </div>
        </div>
      </div>
    </template>
    <!-- 弹窗 -->
    <cj-popup
      v-if="relatedTraining.length > 2"
      v-model="showStudyModal"
      position="bottom" round
    >
      <section class="c-ph24 c-pb10 c-bg-white">
        <div class="c-hh90 c-bd-b1 c-flex-row c-aligni-center">
          <span class="c-fs28 c-fc-xblack c-flex-grow1 c-w0">{{title}}</span>
          <i
            @click="showStudyModal = false"
            class="iconfont c-fs14 c-ph10 c-pv10 c-fc-sgray c-bg-f6 c-brp50"
          >&#xe61b;</i>
        </div>
        <div class="c-w100 c-bg-white c-hh540 c-contexty-scroll c-scroll-touch">
          <div
            class="c-flex-row c-pv20"
            :class="index == relatedTraining.length - 1?'':'c-bd-b1'"
            :key="index"
            v-for="(item, index) in relatedTraining"
            @click="handleClickRoute(item.mainProdType, item.id)"
          >
            <div class="c-ww210 c-hh140 c-flex-row c-flex-center c-br4 c-p">
              <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{prodMapType[item.mainProdType]}}</div>
              <img
                class="c-w100 c-h imgCloseBig c-object-fit-cover c-br4"
                :src="$addXossFilter(item.cover)"
                alt=""
              >
            </div>
            <div class="c-pl20 c-flex-grow1 c-w0 c-flex-column c-justify-sb">
              <p class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</p>
              <div
                class="theme-fc c-lh c-fs24"
                v-if="item.payType == 1 || item.payType == 3"
              >{{item.payType == 1?'免费':'加密'}}</div>
              <div
                class="theme-fc c-lh"
                v-else
                :class="Number(item.price) == 0 ? 'c-fs24':'c-fs26'"
              >
                <span
                  class="c-fs18"
                  v-if="Number(item.price) != 0"
                >{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 78, item.optimal)}}
              </div>
            </div>
          </div>
        </div>
      </section>
    </cj-popup>
  </div>
</template>

<script>
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "CampCourse",
  components: {
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    relatedTraining: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      prodMapType: global.prodMapType,
      showStudyModal: false,
    }
  },
  methods: {
    handleClickRoute(type, id) {
      let courseType = type == 110 ? 0 : type == 111 ? 1 : type == 112 ? 2 : '';
      let prodType = type == 110 || type == 111 || type == 112 ? global.ckFrom.course : type;
      goDetails(this, prodType, id, '', courseType)
    },
  }
}
</script>

<style lang="less" scoped>
</style>